<template>
  <div class="kawaii-messages-container">
    <!-- 动态气泡背景 -->
    <div class="kawaii-bubbles">
      <div class="bubble bubble-1"></div>
      <div class="bubble bubble-2"></div>
      <div class="bubble bubble-3"></div>
      <div class="bubble bubble-4"></div>
      <div class="bubble bubble-5"></div>
      <div class="bubble bubble-6"></div>
    </div>

    <!-- 左侧导航区域 -->
    <div class="kawaii-sidebar">
      <div class="kawaii-menu-container">
        <div class="kawaii-title">
          <span class="kawaii-title-icon">✉️</span>
          消息中心
        </div>
        <div class="kawaii-menu">
          <div class="kawaii-menu-item active" @click="goToPage('messages')">
            <div class="kawaii-menu-icon-container">
              <span class="kawaii-menu-icon">💌</span>
            </div>
            <span>我的消息</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item" @click="goToPage('replies')">
            <div class="kawaii-menu-icon-container reply-icon">
              <span class="kawaii-menu-icon">💬</span>
            </div>
            <span>回复我的</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item" @click="goToPage('likes')">
            <div class="kawaii-menu-icon-container like-icon">
              <span class="kawaii-menu-icon">❤️</span>
            </div>
            <span>收到的赞</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item" @click="goToPage('notify')">
            <div class="kawaii-menu-icon-container notify-icon">
              <span class="kawaii-menu-icon">🔔</span>
            </div>
            <span>系统通知</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间消息列表区域 -->
    <div class="kawaii-list">
      <div class="kawaii-search">
        <div class="kawaii-search-bar">
          <span class="kawaii-search-icon">🔍</span>
          <input
            type="text"
            placeholder="搜索消息..."
            class="kawaii-search-input"
          />
        </div>
        <div class="kawaii-filter">
          <span class="active">全部消息</span>
          <span class="kawaii-separator">•</span>
          <span>未读消息</span>
        </div>
      </div>

      <div class="kawaii-items">
        <div
          v-for="(message, index) in messageList"
          :key="index"
          :class="[
            'kawaii-item',
            message.isRead ? '' : 'unread',
            message.id === currentMessage?.id ? 'active' : '',
          ]"
          @click="selectMessage(message)"
        >
          <div class="kawaii-avatar">
            <img :src="message.animeAvatar" alt="头像" />
            <div v-if="message.isOfficial" class="kawaii-badge"></div>
          </div>
          <div class="kawaii-brief">
            <div class="kawaii-sender">
              <span class="kawaii-name">{{ message.sender }}</span>
              <span class="kawaii-time">{{ message.time }}</span>
            </div>
            <div class="kawaii-preview">{{ message.preview }}</div>
          </div>
          <div v-if="!message.isRead" class="kawaii-unread"></div>
        </div>
      </div>
    </div>

    <!-- 右侧消息详情区域 -->
    <div class="kawaii-detail" v-if="currentMessage">
      <div class="kawaii-detail-header">
        <div class="kawaii-detail-title">
          {{ currentMessage.title }}
        </div>
        <div class="kawaii-detail-time">{{ currentMessage.time }}</div>
      </div>
      <div class="kawaii-detail-content">
        <div class="kawaii-detail-sender">
          <img
            :src="currentMessage.animeAvatar"
            alt="头像"
            class="kawaii-sender-avatar"
          />
          <div class="kawaii-sender-info">
            <div class="kawaii-sender-name">{{ currentMessage.sender }}</div>
            <div class="kawaii-sender-role">
              {{ currentMessage.isOfficial ? '🌟 官方小助手' : '✨ 用户' }}
            </div>
          </div>
        </div>
        <div class="kawaii-detail-body" v-if="currentMessage.type === 'charge'">
          <div class="kawaii-detail-card charge-card">
            <div class="kawaii-card-header">
              <span class="kawaii-card-title">充电开通成功通知</span>
            </div>
            <div class="kawaii-card-content">
              <p>✨ 恭喜您已为小助手米咖动漫馆充入31天电量 ✨</p>
              <p>您的支持就是UP主的动力，感谢您对UP主的支持~</p>
              <p>去UP主的空间里看看吧~</p>
            </div>
            <div class="kawaii-card-footer">
              <div class="kawaii-card-status">当前状态：⚡ 高档充电</div>
              <div class="kawaii-card-btn">
                <button class="kawaii-btn">开通记录</button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="kawaii-detail-body"
          v-else-if="currentMessage.type === 'renewal'"
        >
          <div class="kawaii-detail-card renewal-card">
            <div class="kawaii-card-header">
              <span class="kawaii-card-title">会员续期提醒</span>
            </div>
            <div class="kawaii-card-content">
              <p>您好，您的会员服务期将在近期到期 ⏰</p>
              <p>您可以进入"会员中心"进行续费管理</p>
            </div>
            <div class="kawaii-card-footer">
              <div class="kawaii-card-btn">
                <button class="kawaii-btn-primary">会员中心</button>
              </div>
            </div>
          </div>
        </div>
        <div class="kawaii-detail-body" v-else>
          <div class="kawaii-detail-text">
            {{ currentMessage.content }}
          </div>
          <div
            class="kawaii-detail-attachment"
            v-if="currentMessage.attachment"
          >
            <img
              :src="currentMessage.attachment"
              alt="附件"
              class="kawaii-attachment-img"
            />
          </div>
        </div>
        <div class="kawaii-detail-actions">
          <button class="kawaii-btn" @click="replyMessage">回复</button>
          <button class="kawaii-btn kawaii-btn-danger" @click="deleteMessage">
            删除
          </button>
        </div>
      </div>
    </div>
    <div class="kawaii-empty" v-else>
      <div class="kawaii-empty-content">
        <div class="kawaii-empty-icon">📭</div>
        <p class="kawaii-empty-text">选择一条消息查看详情</p>
        <p class="kawaii-empty-subtext">点击左侧的消息列表开始阅读~</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

// 获取路由器实例
const router = useRouter()

// 页面跳转函数
const goToPage = (page: string) => {
  switch (page) {
    case 'messages':
      router.push('/user/messages')
      break
    case 'replies':
      router.push('/user/replies')
      break
    case 'likes':
      router.push('/user/likes')
      break
    case 'notify':
      router.push('/user/notify')
      break
  }
}

// 二次元头像路径
const animeAvatars = [
  '/src/assets/anime/avatar/avatar1.png',
  '/src/assets/anime/avatar/avatar2.png',
  '/src/assets/anime/avatar/avatar3.png',
  '/src/assets/anime/avatar/avatar4.png',
  '/src/assets/anime/avatar/avatar5.png',
  '/src/assets/anime/avatar/avatar6.png',
  '/src/assets/anime/avatar/avatar7.png',
  '/src/assets/anime/avatar/avatar8.png',
  '/src/assets/anime/avatar/avatar9.png',
  '/src/assets/anime/avatar/avatar10.png',
  '/src/assets/anime/avatar/avatar11.png',
  '/src/assets/anime/avatar/avatar12.png',
  '/src/assets/anime/avatar/avatar13.png',
]

// 获取随机头像
const getRandomAvatar = () => {
  return animeAvatars[Math.floor(Math.random() * animeAvatars.length)]
}

// 定义消息类型接口
interface MessageItem {
  id: number
  sender: string
  animeAvatar: string
  time: string
  preview: string
  title: string
  content: string
  isRead: boolean
  isOfficial: boolean
  type: string
  attachment?: string
}

// 消息列表数据
const messageList = ref<MessageItem[]>([
  {
    id: 1,
    sender: '支付小助手',
    animeAvatar: '/src/assets/anime/avatar/avatar10.png',
    time: '2025年3月18日 00:31',
    preview: '包月充电开通成功通知',
    title: '包月充电开通成功通知',
    content:
      '恭喜您已为小助手米咖动漫馆充入31天电量\n您的支持就是UP主的空间里迸迟的光，感谢您对UP主的支持\n去UP主的空间里看看吧~',
    isRead: false,
    isOfficial: true,
    type: 'charge',
  },
  {
    id: 2,
    sender: 'M2Ustudio',
    animeAvatar: '/src/assets/anime/avatar/avatar1.png',
    time: '2025年3月17日 12:45',
    preview: '感谢关注[兔年]',
    title: '感谢关注',
    content: '感谢您的关注！我会继续努力创作更多优质内容。',
    isRead: false,
    isOfficial: false,
    type: 'text',
  },
  {
    id: 3,
    sender: '喵酱',
    animeAvatar: '/src/assets/anime/avatar/avatar4.png',
    time: '2025年3月15日 18:30',
    preview: '2.1版本开启，5星共鸣者[...]',
    title: '关于新版本更新',
    content: '2.1版本开启，5星共鸣者限定卡池现已上线，快来抽取你心仪的角色吧！',
    isRead: false,
    isOfficial: false,
    type: 'text',
  },
  {
    id: 4,
    sender: '太吾车神',
    animeAvatar: '/src/assets/anime/avatar/avatar3.png',
    time: '2025年3月12日 09:15',
    preview: '感谢关注！破路印案流，用...',
    title: '感谢关注',
    content: '感谢关注！破路印案流，用最新的技术为您带来最精彩的视频内容。',
    isRead: true,
    isOfficial: false,
    type: 'text',
  },
  {
    id: 5,
    sender: '一切皆无',
    animeAvatar: '/src/assets/anime/avatar/avatar5.png',
    time: '2025年3月10日 21:07',
    preview: '[充电消息] 呦！最近好好的吗...',
    title: '充电消息',
    content: '呦！最近好好的吗？感谢你的视频，我学到了很多！特来支持一下~',
    isRead: true,
    isOfficial: false,
    type: 'text',
  },
  {
    id: 6,
    sender: '系统通知',
    animeAvatar: '/src/assets/anime/avatar/avatar11.png',
    time: '2025年3月22日 14:05',
    preview: '大会员续期提醒',
    title: '大会员续期提醒',
    content:
      '您好，您的B站大会员服务期将在近期到期\n您可以进入"会员中心"进行续费管理',
    isRead: true,
    isOfficial: true,
    type: 'renewal',
  },
  {
    id: 7,
    sender: '稀饭少女铁铁道',
    animeAvatar: '/src/assets/anime/avatar/avatar2.png',
    time: '2025年3月05日 10:30',
    preview: '全新世界「铁法史诺」开启...',
    title: '游戏更新通知',
    content: '全新世界「铁法史诺」开启，多样玩法与丰富奖励等待冒险家们的探索！',
    isRead: true,
    isOfficial: true,
    type: 'text',
  },
])

// 当前选中的消息
const currentMessage = ref<MessageItem | null>(messageList.value[0])

// 选择消息
const selectMessage = (message: MessageItem) => {
  currentMessage.value = message

  // 标记为已读
  if (!message.isRead) {
    message.isRead = true
  }
}

// 回复消息
const replyMessage = () => {
  ElMessage.success('回复功能开发中...')
}

// 删除消息
const deleteMessage = () => {
  ElMessage.success('删除成功')
  const index = messageList.value.findIndex(
    (m) => m.id === currentMessage.value?.id,
  )
  if (index !== -1) {
    messageList.value.splice(index, 1)

    // 如果还有消息，选择下一条
    if (messageList.value.length > 0) {
      currentMessage.value =
        messageList.value[
          index === messageList.value.length ? index - 1 : index
        ]
    } else {
      currentMessage.value = null
    }
  }
}

// 生命周期钩子
onMounted(() => {
  // 可以在这里调用API获取真实消息数据
})
</script>

<style scoped>
.kawaii-messages-container {
  position: relative;
  width: 70%;
  margin: 20px auto;
  min-height: calc(100vh - 40px);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(255, 182, 193, 0.3);
  display: flex;
  overflow: hidden;
  border: 2px solid rgba(255, 182, 193, 0.4);
  backdrop-filter: blur(10px);
  z-index: 1;
}

/* 动态气泡背景 */
.kawaii-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(8px);
  animation: float-bubble 15s infinite ease-in-out;
}

.bubble-1 {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #ffb7ef, #ff9ed5);
  top: 10%;
  left: 10%;
  animation-duration: 20s;
  animation-delay: 0s;
}

.bubble-2 {
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #b5c9ff, #a2d0ff);
  top: 20%;
  right: 15%;
  animation-duration: 25s;
  animation-delay: 2s;
}

.bubble-3 {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #ffd1d9, #ffa8c9);
  bottom: 15%;
  left: 20%;
  animation-duration: 18s;
  animation-delay: 1s;
}

.bubble-4 {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #c5ebff, #c3d1ff);
  bottom: 20%;
  right: 10%;
  animation-duration: 22s;
  animation-delay: 3s;
}

.bubble-5 {
  width: 70px;
  height: 70px;
  background: linear-gradient(45deg, #ffe2c8, #ffc4ee);
  top: 50%;
  left: 30%;
  animation-duration: 19s;
  animation-delay: 2.5s;
}

.bubble-6 {
  width: 90px;
  height: 90px;
  background: linear-gradient(45deg, #c9fff0, #b5e9ff);
  top: 60%;
  right: 25%;
  animation-duration: 24s;
  animation-delay: 1.5s;
}

@keyframes float-bubble {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(5%, 10%) rotate(5deg);
  }

  50% {
    transform: translate(-5%, 15%) rotate(-5deg);
  }

  75% {
    transform: translate(10%, 5%) rotate(8deg);
  }
}

/* 左侧菜单 */
.kawaii-sidebar {
  width: 180px;
  background: linear-gradient(to bottom, #fff0f5, #fef9ff);
  border-right: 2px solid rgba(255, 182, 193, 0.4);
  position: relative;
  overflow: hidden;
}

.kawaii-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #ffcbe3, transparent);
}

.kawaii-menu-container {
  padding: 20px 0;
}

.kawaii-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #d15b7b;
  padding: 0 20px 15px;
  border-bottom: 2px solid #ffcbe3;
  position: relative;
  overflow: hidden;
}

.kawaii-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ffcbe3, #ff61d2, #ffcbe3);
  animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.kawaii-title-icon {
  margin-right: 8px;
  font-size: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.kawaii-menu {
  margin-top: 15px;
}

.kawaii-menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #7b5f7a;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 4px solid transparent;
  position: relative;
  margin-bottom: 4px;
}

.kawaii-menu-item:hover {
  background-color: #fff7fa;
  color: #d15b7b;
  border-left: 4px solid #ffcbe3;
  transform: translateX(2px);
}

.kawaii-menu-item.active {
  background-color: #fff0f5;
  color: #d15b7b;
  font-weight: 500;
  border-left: 4px solid #ff9fcf;
}

.kawaii-menu-icon-container {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd1e3, #ffecf2);
  margin-right: 10px;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(255, 182, 193, 0.2);
}

.kawaii-menu-item:hover .kawaii-menu-icon-container {
  transform: rotate(5deg) scale(1.1);
}

.reply-icon {
  background: linear-gradient(135deg, #d1e4ff, #ecf2ff);
}

.like-icon {
  background: linear-gradient(135deg, #ffd1d1, #ffecec);
}

.notify-icon {
  background: linear-gradient(135deg, #fff9d1, #fffcec);
}

.kawaii-menu-icon {
  font-size: 16px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.kawaii-menu-indicator {
  position: absolute;
  right: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff61d2;
  opacity: 0;
  transition: all 0.3s;
}

.kawaii-menu-item:hover .kawaii-menu-indicator {
  opacity: 0.5;
}

.kawaii-menu-item.active .kawaii-menu-indicator {
  opacity: 1;
  box-shadow: 0 0 6px #ff61d2;
  animation: pulse 2s infinite;
}

/* 中间消息列表 */
.kawaii-list {
  width: 280px;
  background-color: rgba(255, 255, 255, 0.9);
  border-right: 2px solid rgba(255, 182, 193, 0.4);
  display: flex;
  flex-direction: column;
  position: relative;
}

.kawaii-list::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #ffcbe3, transparent);
}

.kawaii-search {
  padding: 15px;
  border-bottom: 2px solid #ffcbe3;
  background-color: #fff7fa;
}

.kawaii-search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 20px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 2px solid #ffcbe3;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.1);
}

.kawaii-search-bar:focus-within {
  box-shadow: 0 0 10px rgba(255, 182, 193, 0.5);
  border-color: #ff9fcf;
  transform: translateY(-2px);
}

.kawaii-search-icon {
  margin-right: 8px;
  font-size: 16px;
  animation: rotate 5s infinite linear;
  display: inline-block;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.kawaii-search-input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 14px;
}

.kawaii-filter {
  display: flex;
  font-size: 13px;
  color: #9c7a97;
}

.kawaii-filter span {
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.kawaii-filter span.active {
  color: #d15b7b;
  font-weight: bold;
  position: relative;
}

.kawaii-filter span.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ff61d2, transparent);
  border-radius: 3px;
}

.kawaii-filter span:hover:not(.active) {
  color: #ff9fcf;
  transform: translateY(-1px);
}

.kawaii-separator {
  cursor: default;
  margin: 0 5px;
  opacity: 0.6;
}

.kawaii-items {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.kawaii-items::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.kawaii-items::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ffcbe3, #ff9fcf);
  border-radius: 6px;
}

.kawaii-items::-webkit-scrollbar-track {
  background: #fff7fa;
}

.kawaii-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #ffecf2;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.kawaii-item:hover {
  background-color: #fff7fa;
  transform: translateY(-2px) translateX(2px);
  border-radius: 8px;
  margin: 5px;
  box-shadow: 0 4px 8px rgba(255, 182, 193, 0.15);
  z-index: 1;
}

.kawaii-item.active {
  background-color: #fff0f5;
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2);
  border-radius: 8px;
  margin: 5px;
  border-left: 3px solid #ff9fcf;
}

.kawaii-item.unread {
  background-color: #fef9ff;
}

.kawaii-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
  border: 2px solid #ffcbe3;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(255, 182, 193, 0.2);
}

.kawaii-item:hover .kawaii-avatar {
  transform: scale(1.08) rotate(2deg);
  border-color: #ff9fcf;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.3);
}

.kawaii-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}

.kawaii-item:hover .kawaii-avatar img {
  transform: scale(1.1);
}

.kawaii-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  background: linear-gradient(45deg, #ff61d2, #fe9090);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(255, 97, 210, 0.5);
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 2px rgba(255, 97, 210, 0.5);
  }

  100% {
    box-shadow: 0 0 8px 2px rgba(255, 97, 210, 0.7);
  }
}

.kawaii-brief {
  flex: 1;
  min-width: 0;
}

.kawaii-sender {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.kawaii-name {
  font-weight: 600;
  color: #7b5f7a;
  font-size: 14px;
}

.kawaii-time {
  font-size: 12px;
  color: #ad8db3;
  white-space: nowrap;
}

.kawaii-preview {
  font-size: 13px;
  color: #9c7a97;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kawaii-unread {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff61d2, #fe9090);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.4);
  }

  70% {
    box-shadow: 0 0 0 5px rgba(255, 105, 180, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 105, 180, 0);
  }
}

/* 右侧消息详情 */
.kawaii-detail {
  flex: 1;
  background: linear-gradient(to bottom right, #fff7fa, #fefeff);
  display: flex;
  flex-direction: column;
}

.kawaii-detail-header {
  padding: 25px;
  border-bottom: 2px solid #ffcbe3;
  background-color: #fff7fa;
  position: relative;
  overflow: hidden;
}

.kawaii-detail-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 182, 193, 0.15),
    transparent 70%
  );
  pointer-events: none;
}

.kawaii-detail-title {
  font-size: 20px;
  font-weight: 600;
  color: #7b5f7a;
  margin-bottom: 5px;
}

.kawaii-detail-time {
  font-size: 13px;
  color: #ad8db3;
}

.kawaii-detail-content {
  flex: 1;
  padding: 25px;
  overflow-y: auto;
}

.kawaii-detail-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.kawaii-detail-content::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ffcbe3, #ff9fcf);
  border-radius: 6px;
}

.kawaii-detail-content::-webkit-scrollbar-track {
  background: #fff7fa;
}

.kawaii-detail-sender {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.kawaii-sender-avatar {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  margin-right: 15px;
  border: 3px solid #ffcbe3;
  transition: all 0.3s;
  box-shadow: 0 4px 8px rgba(255, 182, 193, 0.2);
}

.kawaii-sender-avatar:hover {
  transform: scale(1.05) rotate(3deg);
  border-color: #ff9fcf;
  box-shadow: 0 6px 12px rgba(255, 182, 193, 0.3);
}

.kawaii-sender-info {
  flex: 1;
}

.kawaii-sender-name {
  font-size: 18px;
  font-weight: 600;
  color: #7b5f7a;
  margin-bottom: 5px;
}

.kawaii-sender-role {
  font-size: 14px;
  color: #ad8db3;
  display: flex;
  align-items: center;
  gap: 5px;
}

.kawaii-detail-body {
  margin-bottom: 30px;
  animation: fade-in 0.5s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kawaii-detail-text {
  font-size: 16px;
  color: #7b5f7a;
  line-height: 1.7;
  white-space: pre-line;
  background-color: white;
  padding: 20px;
  border-radius: 15px;
  border: 2px solid #ffecf2;
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.1);
  transition: all 0.3s;
}

.kawaii-detail-text:hover {
  box-shadow: 0 6px 15px rgba(255, 182, 193, 0.15);
  transform: translateY(-2px);
}

.kawaii-detail-attachment {
  margin-top: 20px;
}

.kawaii-attachment-img {
  max-width: 100%;
  border-radius: 15px;
  border: 2px solid #ffecf2;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.1);
}

.kawaii-attachment-img:hover {
  transform: scale(1.01);
  border-color: #ff9fcf;
  box-shadow: 0 8px 20px rgba(255, 182, 193, 0.2);
}

.kawaii-detail-card {
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid #ffcbe3;
  background-color: white;
  box-shadow: 0 6px 15px rgba(255, 182, 193, 0.15);
  transition: all 0.3s;
}

.kawaii-detail-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 182, 193, 0.2);
}

.kawaii-card-header {
  padding: 15px 20px;
  background: linear-gradient(45deg, #ff61d2, #fe9090);
  color: white;
  position: relative;
  overflow: hidden;
}

.kawaii-card-header::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
    opacity: 0;
  }

  10% {
    left: -100%;
    opacity: 0.5;
  }

  20% {
    left: 100%;
    opacity: 0;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

.kawaii-card-title {
  font-size: 18px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.renewal-card .kawaii-card-header {
  background: linear-gradient(45deg, #6fb1fc, #a2d0ff);
}

.kawaii-card-content {
  padding: 20px;
  color: #7b5f7a;
  font-size: 15px;
  line-height: 1.7;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.kawaii-card-content p {
  margin: 10px 0;
  position: relative;
}

.kawaii-card-content p:first-child {
  font-weight: 600;
}

.kawaii-card-footer {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #ffecf2;
  background-color: #fff7fa;
}

.kawaii-card-status {
  font-size: 14px;
  color: #ad8db3;
  font-weight: 500;
}

.kawaii-detail-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.kawaii-btn {
  background-color: white;
  border: 2px solid #ffcbe3;
  color: #d15b7b;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.kawaii-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transition: all 0.4s;
  z-index: -1;
}

.kawaii-btn:hover {
  background-color: #fff0f5;
  border-color: #ff9fcf;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 182, 193, 0.3);
}

.kawaii-btn:hover:before {
  left: 100%;
}

.kawaii-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(255, 182, 193, 0.3);
}

.kawaii-btn-primary {
  background: linear-gradient(45deg, #6fb1fc, #a2d0ff);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(111, 177, 252, 0.3);
  z-index: 1;
}

.kawaii-btn-primary:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transition: all 0.4s;
  z-index: -1;
}

.kawaii-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(111, 177, 252, 0.4);
}

.kawaii-btn-primary:hover:before {
  left: 100%;
}

.kawaii-btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(111, 177, 252, 0.4);
}

.kawaii-btn-danger {
  color: #f87e90;
  border-color: #ffd1d9;
}

.kawaii-btn-danger:hover {
  background-color: #ffeef1;
  border-color: #ffb1c1;
}

/* 空消息状态 */
.kawaii-empty {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom right, #fff7fa, #fefeff);
}

.kawaii-empty-content {
  text-align: center;
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.kawaii-empty-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: wave 2s infinite;
  display: inline-block;
}

@keyframes wave {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  75% {
    transform: rotate(-10deg);
  }
}

.kawaii-empty-text {
  font-size: 18px;
  color: #7b5f7a;
  font-weight: 600;
  margin-bottom: 8px;
}

.kawaii-empty-subtext {
  font-size: 14px;
  color: #ad8db3;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .kawaii-messages-container {
    width: 85%;
  }
}

@media screen and (max-width: 768px) {
  .kawaii-messages-container {
    width: 95%;
    flex-direction: column;
  }

  .kawaii-sidebar,
  .kawaii-list {
    width: 100%;
  }
}
</style>
